<template>
	<view>
		<view class="main-box-style infobox">
			<!-- <view class="nologin">
				<view class="infobox_left">
					<image class="u-m-r-20" src="../static/logo.png" mode=""></image>
					<text class="big-title">登录</text>
				</view>
				<u-icon name='arrow-right'></u-icon>
			</view> -->

			<view class="islogin">
				<view class="infobox_left">
					<image class="u-m-r-20" :src="$oss(info.avatar)" mode=""></image>
					<view class="information main-text">
						<view class="information_top">
							<text class="u-p-lr-10">{{info.nickname}}</text>
							<text class="">{{$newphone(info.mobile) || '暂无'}}</text>
						</view>
						<view class="information_bottom">
							<text class="u-p-lr-10">{{info.Park || '暂无'}}</text>
						</view>
					</view>
				</view>
				<!-- <u-icon @click="changeinfo" name='setting-fill'></u-icon> -->
				<image src="../static/edit.png" style="width: 50rpx; height: 50rpx;" @click="changeinfo" mode="">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "infobox",
		data() {
			return {
				info: {}
			};
		},
		mounted() {
			this.init()
			uni.$on('changeinfo', () => {
				this.init()
			})
		},

		methods: {
			//获取个人信息
			init() {
				this.$userinfo().then(res => {
					this.info = res.data.data
				}).catch(err => {
					console.log(err, '失败');
				})
			},
			changeinfo() {
				this.$emit('changeinfo', true)
			}
		}
	}
</script>

<style lang="scss">
	@mixin flex {
		display: flex;
		align-items: center;
	}

	.infobox {
		@include flex justify-content: space-between;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		.nologin {
			width: 100%;
			@include flex justify-content: space-between;

			.infobox_left {
				@include flex
			}
		}

		.islogin {
			.infobox_left {
				@include flex .information {
					display: flex;
					flex-direction: column;
					height: 80rpx;
					justify-content: space-around;
				}
			}

			width: 100%;
			@include flex justify-content: space-between;

		}
	}
</style>